<template>
    <el-col :style="{height:heightLength+'px'}"  class="el-left-menu" :span="3">
        <el-menu  :default-active="active"  background-color="#324157" unique-opened text-color="#bfcbd9"  class="el-menu-vertical-demo" router theme="dark">
            <!--<el-submenu v-for="item in routeList" :key="item.menuUrl" :index="item.menuUrl">-->
                <!--<template slot="title">-->
                    <!--&lt;!&ndash; <i :class="item.icon"></i> &ndash;&gt;-->
                    <!--{{item.menuName}}-->
                    <!--</template>-->
                <!--<el-menu-item-group :key="list.menuUrl" v-for="list in item.childPermissions">-->
                    <!--<el-menu-item :index="list.menuUrl">{{list.menuName}}</el-menu-item>-->
                <!--</el-menu-item-group>-->
            <!--</el-submenu>-->
            <el-submenu v-for="(item, index) in routeList" :key="index" :index="item.menuName">
                <template slot="title">
                    <span>{{item.menuName}}</span>
                </template>
                <el-menu-item
                        v-if="item.childPermissions.length"
                        v-for="list in item.childPermissions"
                        :key="list.menuName"
                        :index="list.menuUrl">
                    {{list.menuName}}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-col>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    var routerList = require('./router-leftBar.js');
export default {
  data () {
    return {
        active:'',
        scroll:'',
        routeList:routerList.default.routerList,
        heightLength:''
    }
  },
  mounted(){
       window.addEventListener('scroll', ()=>{
           let scrollHeight = document.body.scrollHeight;
             this.heightLength =scrollHeight-80
       })
  },
  created(){
      this.leftPermission();
//      this.activePath();
      this.heightLength = document.body.scrollHeight ;
  },
  watch:{

  },
  methods:{
      leftPermission(){
          let url = CONSTANT.URL.USER.FINDUSERPERMISSIONS;
          let data = {};
          let param = JSON.stringify(data);

          common.requestAjax(url,param,null,(res)=>{
              this.routeList = res.data.bussData;
              this.activePath();
          })
      },
      activePath(){
          if('/' == this.$route.path) {
              this.$nextTick(function(){
                  this.active = this.$route.path;
              })
          } else {
              this.$nextTick(function(){
                  this.active = this.$route.path;
              })
          }
          console.log(this.$route,'aaa')
      },
//    activePath(){
//        this.active = this.$router.currentRoute.path
//    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
    .el-left-menu{
      height:1000px;
      position: fixed;
      left: 0;
      width: 206px;
    }
    .el-menu-vertical-demo{
      height: 100%;
    }

    .el-menu-item{
        min-width:auto!important;
    }
    .el-menu-item-group__title{
        padding-top: 0px!important;
    }
    .el-menu-item{
        a{
            display: block;
            color: #bfcbd9;
        }
        &.is-active{
            a{
              color: #20a0ff;
            }
        }
    }
</style>
